參考出處 JS 30 DAY 10

參考出處 Alex 宅幹嘛

中秋節快樂！ 中秋節依舊趕稿中，不過已經第 24 天了！

今天要做的是 JS 30 第十三天的照片移入移出效果製作。當視窗移到照片的區域以動畫方式出現。

練習重點

1. 卷軸事件
2. debounce

捲軸是不斷觸發的事件，所以比較耗能，我們可以用 debounce 來把捲軸觸發事件降低

實作

監聽事件

因為捲軸是在瀏覽器上，所以我們監聽事件要做在瀏覽器上。

window.addEventListener('scroll',debounce(scrollHandler,100))

事件的 function

1. 先選取所有的圖片
2. scrollY 是往下滑的長度
3. window.innerHeight 是視窗的上下範圍。

所以 window.scrollY + window.innerHeight 等於滑動時的下緣

4. 因為選到了全部的圖片，我們要用 forEach 來做，這裏的假設是，當圖片滑到圖片高度一半的時候，就會加上 active 的 class ， 那圖片就會滑入。

let images = document.querySelectorAll('img')

function scrollHandler(){
  
  let windowTop = window.scrollY
  let windowBottom = windowTop + window.innerHeight
  
  images.forEach(img=>{
    
     if (img.offsetTop + img.height /2 < windowBottom){
    img.classList.add('active')
    
   }
  })
}

debounce

這個是 WesBos 給的 debounce 方法。

1. wait --> 等多少秒，immediate true function 代表要不要直接執行
2. 這裏有一個閉包，閉包的概念是設計一個參數只讓這個 function 呼叫，這裏設計的是 timeout。
3. argument 方法是可以撈不定長度的陣列
4. apply 可以指定一個 function 的 this ， apply 方法會對上原本的參數數

function debounce(func, wait = 20, immediate = true) {
      var timeout;
      return function() {
        var context = this, args = arguments;
        var later = function() {
          timeout = null;
          if (!immediate) func.apply(context, args);
        };
        // 每次進來會重新計算時間，然後會清掉
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
      };
    }

以上，明天見